<template>
  <div class="lc-preview-container">
    <div class="title-wrap">
      <div class="icon">
        <ArrowLeft @click="handleClick" />
      </div>
      <span class="title">{{ innerTitle }}</span>
    </div>
    <div class="content">
      <slot>组件预览</slot>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
defineProps({
  title: String
});

const router = useRouter();
const route = useRoute();

const innerTitle = computed(() => {
  return route.query.label || props.title;
});
function handleClick() {
  router.replace('/');
}
</script>
<style lang="scss" scoped>
.lc-preview-container {
  height: 100%;

  .title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: #fff;
    padding: 12px;
    border-radius: 2px;
    box-shadow: 0 3px 4px -4px #333;
    .icon {
      width: 24px;
      height: 24px;
      margin-right: 16px;
      :hover {
        cursor: pointer;
        background: #f5f5f5;
      }
    }
    .title {
      font-size: 24px;
      font-weight: 500;
    }
  }

  .content {
    height: calc(100% - 140px);
    overflow: auto;
    padding: 16px;
    background: #fff;
  }
}
</style>
